<template>
  <view class="toast-container">
    <view 
      v-for="(toast, index) in toastList" 
      :key="toast.id"
      class="toast-item"
      :class="[
        `toast-${toast.type}`,
        `toast-${toast.position}`,
        { 'toast-show': toast.show }
      ]"
      :style="{ zIndex: 10000 + index }"
    >
      <view class="toast-content">
        <!-- 图标 -->
        <view v-if="toast.showIcon" class="toast-icon">
          <u-icon 
            :name="getIconName(toast.type)" 
            :size="toast.iconSize || 20" 
            :color="getIconColor(toast.type)"
          ></u-icon>
        </view>
        
        <!-- 消息内容 -->
        <view class="toast-message">
          <text class="toast-title" v-if="toast.title">{{ toast.title }}</text>
          <text class="toast-text">{{ toast.message }}</text>
        </view>
        
        <!-- 关闭按钮 -->
        <view v-if="toast.closable" class="toast-close" @click="closeToast(toast.id)">
          <u-icon name="close" size="16" color="#999"></u-icon>
        </view>
      </view>
      
      <!-- 进度条 -->
      <view v-if="toast.showProgress" class="toast-progress">
        <view 
          class="toast-progress-bar" 
          :style="{ 
            width: `${toast.progress}%`,
            backgroundColor: getProgressColor(toast.type)
          }"
        ></view>
      </view>
    </view>
  </view>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

interface ToastItem {
  id: string;
  type: 'success' | 'error' | 'warning' | 'info' | 'loading';
  message: string;
  title?: string;
  duration: number;
  position: 'top' | 'center' | 'bottom';
  showIcon: boolean;
  iconSize?: number;
  closable: boolean;
  showProgress: boolean;
  progress: number;
  show: boolean;
  timer?: any;
  progressTimer?: any;
}

@Component
export default class ToastNotification extends Vue {
  toastList: ToastItem[] = [];
  
  /**
   * 显示Toast
   */
  showToast(options: {
    type?: 'success' | 'error' | 'warning' | 'info' | 'loading';
    message: string;
    title?: string;
    duration?: number;
    position?: 'top' | 'center' | 'bottom';
    showIcon?: boolean;
    iconSize?: number;
    closable?: boolean;
    showProgress?: boolean;
  }) {
    const toast: ToastItem = {
      id: Date.now().toString() + Math.random().toString(36).substr(2, 9),
      type: options.type || 'info',
      message: options.message,
      title: options.title,
      duration: options.duration || 3000,
      position: options.position || 'top',
      showIcon: options.showIcon !== false,
      iconSize: options.iconSize,
      closable: options.closable || false,
      showProgress: options.showProgress || false,
      progress: 100,
      show: false
    };
    
    this.toastList.push(toast);
    
    // 延迟显示，触发动画
    this.$nextTick(() => {
      toast.show = true;
    });
    
    // 自动关闭
    if (toast.duration > 0 && toast.type !== 'loading') {
      this.startAutoClose(toast);
    }
    
    return toast.id;
  }
  
  /**
   * 开始自动关闭倒计时
   */
  startAutoClose(toast: ToastItem) {
    if (toast.showProgress) {
      // 显示进度条
      const interval = 50;
      const step = (interval / toast.duration) * 100;
      
      toast.progressTimer = setInterval(() => {
        toast.progress -= step;
        if (toast.progress <= 0) {
          toast.progress = 0;
          clearInterval(toast.progressTimer);
        }
      }, interval);
    }
    
    toast.timer = setTimeout(() => {
      this.closeToast(toast.id);
    }, toast.duration);
  }
  
  /**
   * 关闭Toast
   */
  closeToast(id: string) {
    const index = this.toastList.findIndex(toast => toast.id === id);
    if (index > -1) {
      const toast = this.toastList[index];
      
      // 清除定时器
      if (toast.timer) {
        clearTimeout(toast.timer);
      }
      if (toast.progressTimer) {
        clearInterval(toast.progressTimer);
      }
      
      // 隐藏动画
      toast.show = false;
      
      // 延迟移除
      setTimeout(() => {
        const currentIndex = this.toastList.findIndex(t => t.id === id);
        if (currentIndex > -1) {
          this.toastList.splice(currentIndex, 1);
        }
      }, 300);
    }
  }
  
  /**
   * 关闭所有Toast
   */
  closeAll() {
    this.toastList.forEach(toast => {
      this.closeToast(toast.id);
    });
  }
  
  /**
   * 更新Loading Toast
   */
  updateLoadingToast(id: string, message: string) {
    const toast = this.toastList.find(t => t.id === id);
    if (toast) {
      toast.message = message;
    }
  }
  
  /**
   * 获取图标名称
   */
  getIconName(type: string): string {
    const iconMap: { [key: string]: string } = {
      success: 'checkmark-circle',
      error: 'close-circle',
      warning: 'warning',
      info: 'info-circle',
      loading: 'loading'
    };
    return iconMap[type] || 'info-circle';
  }
  
  /**
   * 获取图标颜色
   */
  getIconColor(type: string): string {
    const colorMap: { [key: string]: string } = {
      success: '#52c41a',
      error: '#ff4d4f',
      warning: '#faad14',
      info: '#1890ff',
      loading: '#1890ff'
    };
    return colorMap[type] || '#1890ff';
  }
  
  /**
   * 获取进度条颜色
   */
  getProgressColor(type: string): string {
    return this.getIconColor(type);
  }
  
  // 便捷方法
  success(message: string, options?: any) {
    return this.showToast({ ...options, type: 'success', message });
  }
  
  error(message: string, options?: any) {
    return this.showToast({ ...options, type: 'error', message });
  }
  
  warning(message: string, options?: any) {
    return this.showToast({ ...options, type: 'warning', message });
  }
  
  info(message: string, options?: any) {
    return this.showToast({ ...options, type: 'info', message });
  }
  
  loading(message: string, options?: any) {
    return this.showToast({ ...options, type: 'loading', message, duration: 0 });
  }
}
</script>

<style lang="scss" scoped>
.toast-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 10000;
}

.toast-item {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  max-width: 80%;
  min-width: 200rpx;
  pointer-events: auto;
  opacity: 0;
  transition: all 0.3s ease;
  
  &.toast-show {
    opacity: 1;
  }
  
  // 位置
  &.toast-top {
    top: 100rpx;
    transform: translateX(-50%) translateY(-20rpx);
    
    &.toast-show {
      transform: translateX(-50%) translateY(0);
    }
  }
  
  &.toast-center {
    top: 50%;
    transform: translateX(-50%) translateY(-50%) scale(0.9);
    
    &.toast-show {
      transform: translateX(-50%) translateY(-50%) scale(1);
    }
  }
  
  &.toast-bottom {
    bottom: 100rpx;
    transform: translateX(-50%) translateY(20rpx);
    
    &.toast-show {
      transform: translateX(-50%) translateY(0);
    }
  }
}

.toast-content {
  display: flex;
  align-items: flex-start;
  padding: 24rpx 32rpx;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 16rpx;
  backdrop-filter: blur(10rpx);
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.12);
  
  .toast-icon {
    margin-right: 16rpx;
    flex-shrink: 0;
  }
  
  .toast-message {
    flex: 1;
    
    .toast-title {
      display: block;
      font-size: 28rpx;
      font-weight: bold;
      color: white;
      margin-bottom: 8rpx;
    }
    
    .toast-text {
      display: block;
      font-size: 26rpx;
      color: white;
      line-height: 1.4;
    }
  }
  
  .toast-close {
    margin-left: 16rpx;
    padding: 4rpx;
    flex-shrink: 0;
  }
}

.toast-progress {
  height: 4rpx;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 0 0 16rpx 16rpx;
  overflow: hidden;
  
  .toast-progress-bar {
    height: 100%;
    transition: width 0.1s linear;
  }
}

// 不同类型的样式
.toast-success .toast-content {
  background-color: rgba(82, 196, 26, 0.9);
}

.toast-error .toast-content {
  background-color: rgba(255, 77, 79, 0.9);
}

.toast-warning .toast-content {
  background-color: rgba(250, 173, 20, 0.9);
}

.toast-info .toast-content {
  background-color: rgba(24, 144, 255, 0.9);
}

.toast-loading .toast-content {
  background-color: rgba(24, 144, 255, 0.9);
}
</style>